<!-- @format -->

<template>

  <div class=" lg:flex  " style="height:98%;">
    <!-- 最新 -->
    <div class="" style="margin-right:12px;height:100%;background:#fff;border-radius:10px;padding:16px;width:0;flex:1">
      <div>
        <!-- <div @click="handleOrderIndexs">更新列表</div> -->
        <div class="lg:flex">
          <a-tooltip content="请输入订单号">
            <a-input v-model="form.order_no" placeholder="请输入订单号" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
          </a-tooltip>
          <a-tooltip content="请输入集装箱号">
            <a-input v-model="form.box" placeholder="请输入集装箱号" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
          </a-tooltip>
          <a-tooltip content="请输入车号">
            <a-input v-model="form.car_no" placeholder="请输入车号" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
          </a-tooltip>
          <a-tooltip content="请选择公司">
            <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.dept_id" :filter-option="filterOption" :options="dept_list" :field-names="fieldNamedept"  allow-clear allow-search
                        placeholder="请选择公司" />
          </a-tooltip>
          <a-tooltip content="请选择订单状态">
            <a-select style="width:calc((100% - 64px) / 5);margin-bottom:16px" v-model="form.pick_status" :options="pick_statusList" :field-names="fieldNamepickStatus"  allow-clear allow-search
                        placeholder="请选择订单状态" />
          </a-tooltip>
        </div>
        <div class="lg:flex">
          <!-- <a-tooltip content="请选择对装类型">
            <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.buff_type" :options="buff_typeList" :field-names="fieldNamebuffType"  allow-clear allow-search
                        placeholder="请选择对装类型" />
          </a-tooltip> -->
          <a-tooltip content="请选择服务方式">
            <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.pick_type" :options="pick_typeList" :field-names="fieldNamepickType"  allow-clear allow-search
                        placeholder="请选择服务方式" />
          </a-tooltip>
          <a-tooltip content="请选择运输方式">
            <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.transport_type" :options="transport_typeList" :field-names="fieldNametransportType"  allow-clear allow-search
                        placeholder="请选择运输方式" />
          </a-tooltip>
          <a-tooltip content="请选择创建时间">
            <a-range-picker
              style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px"
              show-time
              :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
              format="YYYY-MM-DD HH:mm"
              @ok="handleOkTime"
            />
          </a-tooltip>
          <a-tooltip content="请选择配送公司">
            <a-select style="width:calc((100% - 64px) / 5);margin-bottom:16px;margin-right:16px;" v-model="form.ps_dept_id" :options="ps_deptList" :field-names="fieldNamedept" :filter-option="filterOption" allow-clear allow-search
                        placeholder="请选择配送公司" />
          </a-tooltip>
          <div class="flex " style="width:calc((((100% - 64px) / 5)) );margin-bottom:16px">
            <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(1)">搜索</a-button>
            <a-button @click="handleChongZhi(1)">重置</a-button>
          </div>
        </div>  
        
      </div>
      <div style="padding:12px 0;height:calc(100% - 106px);position:relative" ref="scroll">
        <a-scrollbar style="overflow: auto;" :style="{height:scrollHeight + 'px'}" @scroll='handleScroll'>
          <cardList :list="cardLists" :loading="loading" :active="active" @actives='handleActive'></cardList>
        </a-scrollbar>
        <!-- 加载中... -->
        <div v-if="loading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
            <a-spin dot :size="10" />
        </div>
      </div>
    </div>
    <div class="flex flex_column" style="width:30.3%;height:100%;background:#fff;border-radius:10px;padding:12px" v-if="!isObjectEmpty(activeItem)">
      <div class="flex align_center justify_between marbot14">
        <div class="flex align_center ">
          <div style="font-size:16px;line-height:24px;font-weight:600;margin-right:20px">{{activeItem?.dept?.name}}</div>
          <div style="color:rgba(0, 0, 0, 0.6)">订单号：{{activeItem?.order_no}}</div>
        </div>
        <a-tag bordered :color="activeItem.pick_status == 0 || activeItem.pick_status == 3?'orangered':activeItem.pick_status == 2 || activeItem.pick_status == 4?'gray':'green'">
            {{activeItem.pick_status == 0?'待确认':activeItem.pick_status == 1?'已完成':activeItem.pick_status == 2?'未开始':activeItem.pick_status == 3?'进行中':'已取消'}}
        </a-tag>
      </div>
      <div v-if="activeItem.pick_status == 0" class="marbot14">
        <a-popconfirm @ok="orderShouli(activeItem)" content="是否确认受理?" @cancel="handleMare">
          <a-button size="mini" type="primary" @click="handleMare">受理</a-button>
        </a-popconfirm>
        <a-popconfirm @ok="confirmOk(activeItem.id)" content="是否确认取消此提单?" @cancel="handleMare">
          <a-button size="mini" type="primary" style="margin-left:16px;" @click="handleMare">取消订单</a-button>
        </a-popconfirm>
      </div>
      <!-- 选项卡列表 -->
      <div class="flex marbot14" style="border-bottom:1px solid rgba(0, 0, 0, 0.15)">
        <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'jc'?'activetabs':''" style='padding:12px 0' @click="handleTabs('jc')">
          <img src="/public/tipIcon.svg" style="width:44px;height:44px;border-radius:10px" />
          <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">基础信息</div>
        </div>
        <div v-if="activeItem.pick_status == 1 || activeItem.pick_status == 2 ||  activeItem.pick_status == 3" class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'zc'?'activetabs':''" style='padding:12px 0' @click="handleTabs('zc')">
          <img src="/public/tipzhuang.svg" style="width:44px;height:44px;border-radius:10px" />
          <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">历史装车单</div>
        </div>
        <div v-if="activeItem.accept_status == 1" class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'sj'?'activetabs':''" style='padding:12px 0' @click="handleTabs('sj')">
          <img src="/public/tipBang.svg" style="width:44px;height:44px;border-radius:10px" />
          <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">绑定司机</div>
        </div>
        <div v-if="activeItem.pick_status == 2 ||  activeItem.pick_status == 3 || activeItem.pick_status == 1" class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'xd'?'activetabs':''" style='padding:12px 0' @click="handleTabs('xd')">
          <img src="/public/tipXia.svg" style="width:44px;height:44px;border-radius:10px" />
          <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">创建装车单</div>
        </div>
        <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'cz'?'activetabs':''" style='padding:12px 0' @click="handleTabs('cz')">
          <img src="/public/tipCao.svg" style="width:44px;height:44px;border-radius:10px" />
          <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">操作记录</div>
        </div>
        <!-- <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'zd'?'activetabs':''" style='padding:12px 0' @click="handleTabs('zd')">
          <img src="/public/tipZhang.svg" style="width:44px;height:44px;border-radius:10px" />
          <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">账单</div>
        </div> -->
        <!-- <div class="flex_1 flex align_center justify_center flex_column cursor" :class="tabs == 'qr'?'activetabs':''" style='padding:12px 0' @click="handleTabs('qr')">
          <img src="/public/tipQue.svg" style="width:44px;height:44px;border-radius:10px" />
          <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">确认</div>
        </div> -->
      </div>
      <!-- 主体信息 -->
      <div class="flex_1" style="overflow: auto;">
        <!-- 基础信息 -->
        <div v-if="tabs == 'jc'" style="padding:12px">
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>提单号</div>
            <div>{{activeItem?.order_no}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>客户名称</div>
            <div>{{activeItem?.dept?.name}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>总件数/剩余件数</div>
            <div>{{activeItem?.pick_number_zong}}件/{{activeItem.pick_number_yu}}件</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>总吨数/剩余吨数</div>
            <div>{{activeItem?.pick_weight_zong}}吨/{{activeItem.pick_weight_yu}}吨</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>车号</div>
            <div class="flex align_center flex_wrap flex_1 width0">
              <div style="margin-right:20px;margin-bottom:8px" v-if="!activeItem.showCar">{{activeItem?.car_nos?.length}} 个车号</div>
              <div style="margin-right:20px;max-width: 100%;word-wrap: break-word;" v-else>
                  <div class="flex flex_wrap"></div>
                  <a-tag color="arcoblue" v-for="(item,index) in activeItem?.car_nos" :key="index" style="margin-right:8px;margin-bottom:8px">{{item}}</a-tag>
              </div>
              <a-link style="margin-bottom:8px" @click="handleShowCar">{{activeItem.showCar?'点击收起':'点击查看'}}</a-link>
            </div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>订单状态</div>
            <div :style="{color:activeItem.pick_status == 0 || activeItem.pick_status == 3?'orangered':activeItem.pick_status == 2 || activeItem.pick_status == 4?'gray':'green'}">· {{activeItem.pick_status == 0?'待确认':activeItem.pick_status == 1?'已完成':activeItem.pick_status == 2?'未开始':activeItem.pick_status == 3?'进行中':'已取消'}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>原始凭证</div>
            <div>{{activeItem?.batch_no}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)' >运输方式</div>
            <div>{{activeItem.transport_type == 1?'集装箱':activeItem.transport_type == 2?'整车':'批量快运'}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>对装类型</div>
            <div>{{activeItem.buff_type == 1?'对装':activeItem.buff_type == 2?'非对装':'未知'}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>提货类型</div>
            <div>{{activeItem.pick_type == 1?'自提':activeItem.pick_type == 2?'委托配送':activeItem.pick_type == 3?'仓储自提':'仓储配送'}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>提货方式</div>
            <div>{{activeItem.pick_method == 1?'先打后提':activeItem.pick_method == 2?'先提后打':'未受理'}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>是否还箱</div>
            <div>{{activeItem.is_retrun == 1?'需要还箱':'无需还箱'}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px'>
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>创建时间</div>
            <div>{{activeItem?.created_at}}</div>
          </div>
          <div class="flex" style='margin-bottom:20px' v-if="activeItem.pick_type == 2 || activeItem.pick_type == 4">
            <div style='width:160px;color:rgba(0, 0, 0, 0.4)'>配送公司</div>
            <div>{{activeItem?.ps_dept.name}}</div>
          </div>
          
        </div>
        <!-- 已下装车单 -->
        <div class="flex flex_column" v-show="tabs == 'zc'" style="height:100%">
          <div class="flex">
            <a-tooltip content="请输订单号">
              <a-input v-model="orderItem.order_no" placeholder="请输订单号" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
            </a-tooltip>
            <a-tooltip content="请输司机车牌">
              <a-input v-model="orderItem.deriver_car_no" placeholder="请输司机车牌" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
            </a-tooltip>
            <a-tooltip content="请输司机手机">
              <a-input v-model="orderItem.deriver_mobile" placeholder="请输司机手机" allow-clear style="width:calc((100% - 24px) / 3);margin-right:0px;margin-bottom:12px" />
            </a-tooltip>
            
          </div>
          <div class="flex">
            <a-tooltip content="请选择对装类型">
              <a-select style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" v-model="orderItem.buff_type" :options="buff_typeList" :field-names="fieldNamebuffType"  allow-clear allow-search
                          placeholder="请选择对装类型" />
            </a-tooltip>
            <a-tooltip content="请选择服务方式">
              <a-select style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" v-model="orderItem.pick_type" :options="pick_typeList" :field-names="fieldNamepickType"  allow-clear allow-search
                          placeholder="请选择服务方式" />
            </a-tooltip>
            <a-tooltip content="请选择订单状态">
              <a-select style="width:calc((100% - 24px) / 3);margin-right:0px;margin-bottom:12px" v-model="orderItem.deriver_pick_status" :options="deriver_pick_statusList" :field-names="fieldNamederiverpickStatus"  allow-clear allow-search
                          placeholder="请选择订单状态" />
            </a-tooltip>
            
          </div>
          <div class="flex">
            <a-tooltip content="请选择运输类型">
              <a-select style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" v-model="orderItem.transport_type" :options="transport_typeList" :field-names="fieldNametransportType"  allow-clear allow-search
                          placeholder="请选择运输类型" />
            </a-tooltip>
            <a-tooltip content="请选择创建时间">
              <a-range-picker
                style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px"
                show-time
                :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
                format="YYYY-MM-DD HH:mm"
                @ok="handleOkTimes"
              />
            </a-tooltip>
            <div class="flex justify_end" style="width:calc((100% - 24px) / 3);margin-right:0px;margin-bottom:12px">
              <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(3)">搜索</a-button>
              <a-button @click="handleChongZhi(3)">重置</a-button>
            </div>
          </div>
          <div class="flex justify_between align_center marbot12">
            <div class="flex">
              <!-- <a-button type="primary" style="margin-right:16px;">导出列表</a-button> -->
              
            </div>
            <div style="font-size:14px;color:rgba(0,0,0,.4)">共{{deriverorderLists.length}}项</div>
          </div>
          <div class="flex_1" ref="zcScroll" style="position:relative">
            <a-scrollbar style="overflow: auto;" :style="{height:zcScrollHeight + 'px'}" @scroll='handlezcScroll'>
              <deriverorder :list="deriverorderLists" :loading="yxzcdloading" :inforow="activeItem" @shuaxin='handleShuaxin'></deriverorder>
            </a-scrollbar>
            <div v-if="yxzcdloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                <a-spin dot :size="10" />
            </div>
          </div>
          
          
          
        </div>
        <!-- 绑定司机 -->
        <div class="flex flex_column" v-show="tabs == 'sj' " style="height:100%">
          <div class="flex align_center">
            <a-tooltip content="请选择绑定司机">
              <a-select style="width:calc(100% / 2);margin-right:12px;margin-bottom:12px" v-model="CarNoItem.car_ids" :filter-option="filterOption" :options="bangdingsijiList" :field-names="fieldNamebangdingsiji"  allow-clear allow-search
                          placeholder="请选择绑定司机" />
            </a-tooltip>
            <div class="flex align_center justify_end" style="width:calc(100% / 2);margin-bottom:12px">
              <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(4)">搜索</a-button>
              <a-button @click="handleChongZhi(4)">重置</a-button>
            </div>
          </div>
          <div class="flex align_center justify_between marbot12">
            <a-button type="primary" style="margin-right:16px;" @click="handleAddSiJi" v-auth="['prediction:order:saveDriver']">新增司机</a-button>
            <div style="font-size:14px;color:rgba(0,0,0,.4)">共{{CarNoList.length}}项</div>
          </div>
          <div class="flex_1" ref="sjScroll" style="position:relative">
            <a-scrollbar style="overflow: auto;" :style="{height:sjScrollHeight + 'px'}" @scroll='handlesjScroll'>
              <derivercar :list="CarNoList" :loading="sjloading" @shuaxin='handleShuaxinSJ'></derivercar>
            </a-scrollbar>
            <!-- 加载中... -->
            <div v-if="sjloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                <a-spin dot :size="10" />
            </div>
          </div>
        </div>
        <!-- 账单 -->
        <div class="flex flex_column" v-show="tabs == 'zd'" style="height:100%">
          <div class="flex align_center justify_between marbot12">
            <div class="flex">
              <!-- <a-button type="primary" style="margin-right:16px;" @click="editShow({price_config: [], predicateOrder: activeItem})">创建账单</a-button> -->
              <a-button type="primary" style="margin-right:16px;" @click='handleZhifu'>批量支付</a-button>
              <a-button type="primary" style="margin-right:16px;" @click='handleQueRenZhangdan'>确认账单</a-button>
            </div>
            
            <div style="font-size:14px;color:rgba(0,0,0,.4)">共{{billList.length}}项</div>
          </div>
          <div class="flex_1" ref="zdScroll" style="position:relative">
            <a-scrollbar style="overflow: auto;" :style="{height:zdScrollHeight + 'px'}" @scroll='handlezdScroll'>
              <OrderShowItems ref="orderShowItemsRef" :list="billList" :yuguItem="yuguBillItem" :zhifuShow="zhifuShow" @chuanList="handlechuanList" @shuaxin='handleShuaxinZD' @zhifushows="zhifuShowFun"></OrderShowItems>
            </a-scrollbar>
            <div v-if="zhangdanloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                <a-spin dot :size="10" />
            </div>
            
          </div>
        </div>
        <!-- 确认 -->
        <div class="flex flex_column" v-show="tabs == 'qr'" style="height:100%">
          <a-empty />
        </div>
        <!-- 操作 -->
        <div class="flex flex_column" v-show="tabs == 'cz'" style="height:100%">
          <!-- <div class="cards flex justify_between align_center marbot12">
            <div class="">
              <div style="font-size:16px;line-height:24px;font-weight:600;margin-bottom:8px">更正订单</div>
              <div style="font-size:12px;line-height:20px;font-weight:400;color:rgba(0,0,0,.6)">确认提货完结，退还未装车件数和重量至预报或仓储</div>
            </div>
            <a-button type="primary" @click="orderGengzheng(activeItem)" style="margin-left:16px;" :disabled='(activeItem?.pick_status == 2 ||  activeItem?.pick_status == 3) && ((activeItem?.pick_number_yu - 0 > 0) ||(activeItem?.pick_weight_yu - 0 > 0))?false:true'>点击更正</a-button>
          </div> -->
          <div class="cards flex justify_between align_center marbot12">
            <div style="font-size:16px;line-height:24px;font-weight:600;">取消订单</div>
            <a-popconfirm @ok="confirmOk(activeItem.id)" content="是否确认取消此提单?" @cancel="handleMare">
              <a-button type="primary" style="margin-left:16px;" :disabled='activeItem.pick_status == 0 ||  activeItem.pick_status == 2?false:true' @click="activeItem.pick_status == 0 ||  activeItem.pick_status == 2?handleMare:''">点击取消</a-button>
            </a-popconfirm>
          </div>
        </div>
        <!-- 下单 -->
        <div class="flex flex_column" v-show="tabs == 'xd'" style="height:100%">
          <!-- 集装箱 -->
          <div v-if="activeItem.transport_type == 1">
            <div class="flex">
              <a-tooltip content="请输箱号">
                <a-input v-model="xiadanItem.prediction.box" placeholder="请输箱号" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
              </a-tooltip>
              <a-tooltip content="请输箱型箱类">
                <a-input v-model="xiadanItem.prediction.box_type" placeholder="请输箱型箱类" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
              </a-tooltip>
              <div class="flex align_center justify_end" style="width:calc((100% - 24px) / 3);margin-bottom:12px">
                <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(2)">搜索</a-button>
                <a-button @click="handleChongZhi(2)">重置</a-button>
              </div>
            </div>
          </div>
          <!-- 整车 -->
          <div v-if="activeItem.transport_type == 2">
            <div class="flex">
              <a-tooltip content="请输品名">
                <a-input v-model="xiadanItem.prediction.goods_name" placeholder="请输品名" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
              </a-tooltip>
              <a-tooltip content="请输车号">
                <a-input v-model="xiadanItem.prediction.car_no" placeholder="请输车号" allow-clear style="width:calc((100% - 24px) / 3);margin-right:12px;margin-bottom:12px" />
              </a-tooltip>
              <div class="flex align_center justify_end" style="width:calc((100% - 24px) / 3);margin-bottom:12px">
                <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(2)">搜索</a-button>
                <a-button @click="handleChongZhi(2)">重置</a-button>
              </div>
            </div>
            
          </div>
          <div class="flex_1" ref="xdScroll" style="position:relative">
            <a-scrollbar style="overflow: auto;" :style="{height:xdScrollHeight + 'px'}">
              <deriverOrderDetail v-if="tabs == 'xd'" :carlist = "CarNoList" :list="xiadanList" :car_no="xiadan_car_no" :inforow="activeItem" @shuaxin='handlexdShuaxin' @gengxincar="gengxincar"></deriverOrderDetail>
            </a-scrollbar>
            <!-- 加载中... -->
            <div v-if="xiadanloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                <a-spin dot :size="10" />
            </div>
          </div>
          
          
          
        </div>
      </div>
    </div>
    <div class="flex flex_column" style="width:34.3%;height:100%;background:#fff;border-radius:10px;padding:12px" v-else>
      <div class="flex justify_center align_center" style="height:100%;width:100%" >
        <a-empty />
      </div>
    </div>
    <!-- 点击确认 -->
    <a-drawer
        v-model:visible="orderQueShow"
        :footer="false"
        :width="1400"
    >
      <template #title> 确认</template>
      <orderQue v-if="orderQueShow" ref="orderQueRef" :row="deptIds" @handlecolse="handlecolse"/>
    </a-drawer>
    
    <a-modal :mask-closable="false" 
        v-model:visible="gengzhengvisible"
        @cancel="handleCancel"
        :on-before-ok="handlegengzhengOk"
    >
      <template #title> 温馨提示</template>
      <div>
        是否更正提货订单数量，更正后订单不可继续提货，剩余数量将原路退回
      </div>
    </a-modal>
    
     <!-- 创建账单 -->
    <ma-form-modal
        v-if='showEdit'
        :width="800"
        title="账单编辑"
        ref="editRef"
        :pay_type='1'
        :submit="editSubmit"
        :columns="editColumn"
    >

    </ma-form-modal>
    <!-- 新增司机 -->
    <a-modal :mask-closable="false"  title="绑定司机" :width="600" v-model:visible="addSijiShow" @cancel="handleAddSiJi" :on-before-ok="handleaddSijiShowOk">
      <div class="flex align_center">
        <div class="flex align_center" style="margin-right:16px">
          <div style="color:red">*</div>
          <div>绑定司机：</div>
        </div>
        <a-select style="flex:1;width:0" v-model="addcar_no" :options="bangdingsijiList" :filter-option="filterOption" :field-names="fieldNamebangdingsiji"  allow-clear allow-search
                          placeholder="请选择绑定司机" />
      </div>
    </a-modal>
    <!-- 受理 -->
    <a-modal :mask-closable="false" 
        v-model:visible="slshowModle"
        title="订单受理"
        width="1200px"
        :on-before-ok="handleslOk"
    >
      <div style="display: flex; align-items: center; margin-bottom: 20px">
        <div style="font-size: 16px; width: 120px">受理订单：</div>
        <div style="font-size: 16px">{{ slitem.value?.order_no }}</div>
      </div>
      <div style="display: flex; align-items: center;margin-bottom: 20px">
        <div style="font-size: 16px; width: 120px">提货方式：</div>
        <div style="flex: 1">
          <a-select v-model="pick_method" placeholder="请选择提货方式">
            <a-option
                v-for="(item, index) in methodList"
                :key="index"
                :label="item.title"
                :value="item.key"
            />
          </a-select>
        </div>
      </div>
      <div style="display: flex; align-items: center;margin-bottom: 20px">
        <div style="font-size: 16px; width: 120px">是否对装：</div>
        <div style="flex: 1">
          <a-select v-model="buff_type" placeholder="请选择是否对装：">
            <a-option
                v-for="(item, index) in buttList"
                :key="index"
                :label="item.title"
                :value="item.key"
            />
          </a-select>
        </div>
      </div>
      <a-table summary-text="合计" summary :columns="columnsEpor"  :bordered="{wrapper: true, cell: true}"  :data="slitem.value?.detail"  :pagination="false">
				<template #remark="{ record, rowIndex }">
					
				</template>
				<template #summary-cell="{ column, record, rowIndex }">
					{{
						column.dataIndex == "batch_no" ? "合计" : column.dataIndex == "pick_weight"  ? (record[column.dataIndex] - 0).toFixed(3) + '吨' : column.dataIndex == "pick_number"  ? record[column.dataIndex] + '件' : ''
					}}
				</template>
			</a-table>
    </a-modal>
    <!-- 确认账单 -->
    <a-modal :mask-closable="false"  v-model:visible="showBill" title="确认账单" @cancel="showBill = false" :width="1400" :footer="false">
      <bill ref="billRef" v-if="showBill" :item="billData" :type="1" @quxiao="showBill = false" @shuaxin="zhangdanshuaxin"></bill>
    </a-modal>
    <mares ref="mareRef"></mares>
  </div>
</template>
<script setup>

	import { ref,shallowRef, reactive,onActivated,onMounted,watch } from "vue";
	import predictionOrder from "@/api/prediction/predictionOrder";
	import predictionOrderCar from "@/api/prediction/predictionOrderCar";
	import { Message } from "@arco-design/web-vue";
	import { Notification } from "@arco-design/web-vue";
	import { request } from "@/utils/request.js";
  import {cloneDeep, get, isEmpty} from "lodash";
  import bill from "@/components/bill/index.vue"
  import mares from "@/components/mare/mare.vue"
  import { pinyin } from "pinyin-pro"
	import tool from "@/utils/tool";
	import * as common from "@/utils/common";
	import Print from "@/utils/print";
	import { useUserStore } from "@/store";
	import deriverorder from "@/views/prediction/deriverOrder/index.vue";
	import derivercar from "@/views/prediction/orderCar/index.vue";
	import orderdetail from "@/views/prediction/orderCar/index.vue";
	import deriverOrderDetail from "@/views/prediction/orderDetail/index.vue";
	import orderQue from "@/views/prediction/orderQue/index.vue";
  import MaFormModal from "@/components/ma-form-modal/index.vue"
  import PriceConfigEditCompanies from "@/views/system/userContractCharging/PriceConfigEdit.vue";
	import cardList from "@/components/cardList/cardList.vue";
  import FinancialPayOrder from "@/api/financial/financialPayOrder";
  import predictionOrderDetail from "@/api/prediction/predictionOrderDetail";
  import OrderShowItems from "@/views/financial/payOrder/orderShowItems.vue"
  
  

  const mareRef = ref()
  const OrderShowZdRef = ref;
  const showBill = ref(false)
  const billData = ref({})
  const orderShowItemsRef = ref();
	const visibleDeriverorder = ref(false);
	const visibleOrdercar = ref(false);
	const orderQueShow = ref(false);
  const slshowModle = ref(false);
	const visiblederiverOrderDetail = ref(false);
  const orderShowItems = ref(false)
	const gengzhengvisible = ref(false);
	const deriverorderRef = ref();
	const orderCarRef = ref();
	const orderQueRef = ref();
	const deriverOrderDetailRef = ref();
	const userStore = useUserStore();
	// 当前登录的用户所有信息，包括 id 用户名 昵称 等信息
	const user = userStore.user;
	// const drivers = reactive([]);
	// const drivers_id = ref()
	const deptIds = ref();
	const crudRef = ref();
	const pick_method = ref(2);
	const crudContentRef = ref();
	const queShow = ref(false);
	const slitem = reactive({});
	const methodList = reactive([
		{ key: 1, title: "先打后提" },
		{ key: 2, title: "先提后打" },
	]);
	const buttList = reactive([
		{ key: 1, title: "对装" },
		{ key: 2, title: "非对装" },
	]);
  const filterOption = (v,option)=>{
    return option.keywords.some(keywords=>keywords.includes(v))
  }
	const buff_type = ref(2)
  const yuGuzdShow = ref(false)
  const yujiItem = ref({})
	let okloading = false;
	let newData = "";
	let datas = [];
	let sjdatas = [];
	let selectsj = [];
	let orderId = "";
	let order_no = "";
	let gengzheng_id = "";
  const ps_deptList = ref([])
  const form = ref({
    order_no:'',
    batch_no:'',
    dept_id:'',
    car_no:'',
    pick_status:'',
    buff_type:'',
    pick_type:"",
    transport_type:"",
    created_at:'',
    ps_dept_id:'',
    box:'',
    page:1,
    pageSize:10,
  })
  const dept_list = ref([])
  const pick_statusList = ref([])
  const buff_typeList = ref([])
  const pick_typeList = ref([])
  const service_typeList = ref([
        {
            title:'站到站',
            key:'1'
        },
        {
            title:'站到门',
            key:'2'
        },
        {
            title:'门到站',
            key:'3'
        },
        {
            title:'门到门',
            key:'4'
        }
  ])
  const transport_typeList = ref([])
  const deriver_pick_statusList = ref([])
  const bangdingsijiList = ref([])
  
  const fieldNamederiverpickStatus = {value: 'key', label: 'title'}
  const fieldNamedept = {value: 'id', label: 'name'}
  const fieldNamepickStatus = {value: 'key', label: 'title'}
  const fieldNamebuffType = {value: 'key', label: 'title'}
  const fieldNamepickType = {value: 'key', label: 'title'}
  const fieldNametransportType = {value: 'key', label: 'title'}
  const fieldNamebangdingsiji = {value: 'id', label: 'car_and_driver'}
  const scroll = ref(null)
  const scrollHeight = ref(0)
  const zcScrollHeight = ref(0)
  const zcScroll = ref(null)
  const sjScrollHeight = ref(0)  // 绑定司机的滚动高度
  const sjScroll = ref(null)   //  默认高度
  const zdScrollHeight = ref(0)  // 账单的滚动高度
  const zdScroll = ref(null)   //  默认高度
  const billList = ref([])   //  账单列表
  const yuguBillItem = ref({})   //  预估账单
  const zhifuShow = ref(false)
  const editRef = ref({})
  const showEdit = ref(true)     // 创建账单
  const xdScrollHeight = ref(0)  // 绑定司机的滚动高度
  const xdScroll = ref(null)   //  默认高度
  const xiadanList = ref([])   //  下单列表
  const xiadanItem = ref({
    order_id:'',
    prediction:{
      box:'',
      box_type:'',
      goods_name:'',
      car_no:'',
    }
  })
  const xiadan_car_no = ref('')
  const loading = ref(false)
  const sjloading = ref(false)
  const yxzcdloading = ref(false)
  const xiadanloading = ref(false)
  const zhangdanloading = ref(false)
  const addSijiShow = ref(false)
  const addcar_no = ref('')
  const gengxincar = (e)=>{
    xiadan_car_no.value = e
  }
  const handleMare = ()=>{
    mareRef.value.handleShow()
  }
  const zhangdanshuaxin = ()=>{   // 账单刷新
    showBill.value = false
    handleTabs('zd')
    handleOrderIndexs()
  }
  const handleAddSiJi = ()=>{   //  唤起绑定司机弹窗
    addSijiShow.value = !addSijiShow.value
    addcar_no.value = ''
  }
  const handleQueRenZhangdan = ()=>{
    billData.value = activeItem.value
    showBill.value = true
  }
  const handleaddSijiShowOk = async ()=>{   // 绑定司机司机
    let res = await predictionOrderCar.saveDriver({order_id: activeItem.value.id, car_ids: addcar_no.value})
    if(res.code == 200){
        Message.success('绑定成功！')
        addSijiShow.value = false
        handleorderCarLists() 
        return true
    }else{
        Message.error(res.message)
        return false
    }
    
  }
  const isObjectEmpty = (obj)=>{   // 判断是否是空对象
    console.log(obj)
    return Object.keys(obj).length === 0;
  }
  const handleShowCar = ()=>{   // 查看车牌
    activeItem.value.showCar = !activeItem.value.showCar
    console.log(activeItem.value.showCar)
  }
  const handleSouSuo = (item) =>{   //搜索
    if(item == 1){  // 提货单列表搜索
      form.value.page = 1
      cardLists.value = []
      activeItem.value = {}
      tabs.value = 'jc'
      handleOrderIndex()
    }else if(item == 2){   // 下单列表
      xiadanList.value = []
      handleXiaDanList()
    }else if(item == 3){   // 已下单列表
      deriverorderLists.value = []
      orderItem.value.page = 1
      handlederiverorderList()
    }else if(item == 4){
      CarNoList.value = []
      CarNoItem.value.page = 1
      handleorderCarList()
    }
  }
  const handleChongZhi = (item) =>{
    if(item == 1){
      form.value.page = 1
      form.value.order_no = ''
      form.value.batch_no = ''
      form.value.box = ''
      form.value.car_no = ''
      form.value.dept_id = ''
      form.value.pick_status = ''
      form.value.buff_type = ''
      form.value.pick_type = ''
      form.value.transport_type = ''
      form.value.created_at = ''
      form.value.ps_dept_id = ""
      cardLists.value = []
      activeItem.value = {}
      tabs.value = 'jc'
      handleOrderIndex()
    }else if(item == 2){
        xiadanList.value = []
        xiadanItem.value.prediction.box = ''
        xiadanItem.value.prediction.box_type = ''
        xiadanItem.value.prediction.goods_name = ''
        xiadanItem.value.prediction.car_no = ''
        handleXiaDanList()
    }else if(item == 3){
      orderItem.value.order_no = ''
      orderItem.value.buff_type = ''
      orderItem.value.pick_type = ''
      orderItem.value.deriver_pick_status = ''
      orderItem.value.deriver_car_no = ''
      orderItem.value.deriver_mobile = ''
      orderItem.value.transport_type = ''
      orderItem.value.created_at = ''
      orderItem.value.page = 1
      orderItem.value.pageSize = 10
      deriverorderLists.value = []
      handlederiverorderList()
    }else if(item == 4){
      CarNoItem.value.page = 1
      CarNoItem.value.pageSize = 100
      CarNoItem.value.car_ids = ''
      CarNoList.value = []
      handleorderCarList()
    }
    
  }
  const editColumn = ref([
      {
        dataIndex: 'price_config',
        componentName: "price_config_component",
        title: '',
        formType: 'component',
        component: shallowRef(PriceConfigEditCompanies)
      },
  ])
  const cardLists = ref([])
  const active = ref(0)     // 选择的卡片
  const activeItem = ref({})
  const tabs = ref('jc')    //  详情选项卡选中的值
  const deriverorderLists = ref([])   // 装车单列表
  const orderItem = ref({
    order_no:'',
    buff_type:'',
    pick_type:'',
    deriver_pick_status:'',
    deriver_car_no:'',
    deriver_mobile:'',
    transport_type:'',
    created_at:'',
    page:1,
    pageSize:10,
    order_id:''
  })
  const CarNoList = ref([])  // 已绑定司机列表
  const CarNoItem = ref({
    page:1,
    pageSize:100,
    order_id:'',
    car_ids:'',
  })
  const billItem = ref({
    page:1,
    pageSize:10,
    prediction_order_id:'',
  })
  const handlechuanList = (index)=>{
    billList.value[index].flag = !billList.value[index].flag
  }
  const handleZhifu = ()=>{
    let num = billList.value.findIndex((item)=>{
      return item.flag == true
    })
    if(num == -1){
      return Message.error('请选择需要支付的订单')
    }else{
      zhifuShow.value = true
    }
  }
  const zhifuShowFun = (res)=>{    // 接受账单组件传回来的值
    zhifuShow.value = res
  }
  const handleShuaxin = ()=>{
    console.log('刷新')
    handlederiverorderLists()
    handleOrderIndexs()
  }
	const handleShuaxinSJ = ()=>{
    handleorderCarLists()
    handleOrderIndexs()
  }
  const handleShuaxinZD = ()=>{
    handlePayOrderIndexs()
    handleOrderIndexs()
  }
  const handlexdShuaxin = ()=>{
    handleXiaDanList()
    handleOrderIndexs()
  }
  watch(active,(newValue,oldValue)=>{
    cardLists.value.map((v,i)=>{
      if(v.id == newValue){
        activeItem.value = v
      }
    })
  })
  const isShuaxin = ref(false)
  onMounted(()=>{
    console.log('onMounted')
    isShuaxin.value = true
    handleDeptList()
    handlePsDeptList()
    handlepickStatus()
    handlebuffType()
    handlepickType()
    handletransportType()
    handlederiverpickStatus()
    handleOrderIndex()
    setTimeout(()=>{
      isShuaxin.value = false
      scrollHeight.value = scroll.value.offsetHeight - 8
    },1000)
    console.log(scroll.value)
    scrollHeight.value = scroll.value.offsetHeight - 8
  })
  onActivated(()=>{
    console.log('onActivated')
    if(!isShuaxin.value){
      form.value.page=1,
      cardLists.value = []
      handleOrderIndex()
    }
    
    
  })
  const handleXiaDanList = ()=>{   // 获取下单列表
    let objectItem = JSON.parse(JSON.stringify(xiadanItem.value))
    let obj = {}
    if(activeItem.value.pick_type == 1 || activeItem.value.pick_type == 2){
      obj.prediction = {}
      for(let key in xiadanItem.value){
        if(xiadanItem.value[key]){
          obj[key] = xiadanItem.value[key]
          if(obj[key].constructor === Object){
            for(let uer in obj[key]){
              if(xiadanItem.value[key][uer]){
                obj[key][uer] = xiadanItem.value[key][uer]
              }
            }
          }
        }
      }
    }else{
      obj.wareuserdetail = {}
      for(let key in xiadanItem.value){
        if(xiadanItem.value[key].constructor !== Object){
          if(xiadanItem.value[key]){
            obj[key] = xiadanItem.value[key]
          }
        }else if(xiadanItem.value[key].constructor === Object){
          for(let uer in xiadanItem.value[key]){
              if(xiadanItem.value[key][uer]){
                obj['wareuserdetail'][uer] = xiadanItem.value[key][uer]
              }
            }
        }
      }
    }
    xiadanloading.value = true
    console.log("objssss:",obj)
    obj.page = 1
    obj.pageSize = 400
    request({
        url: '/prediction/orderDetail/index',
        method: 'get',
        params:obj
      }).then(res=>{
        if(res.code == 200){
          xiadanloading.value = false
          let _data = res.data.items
        _data.map((v,i)=>{
          v.pick_number = v.pick_number_yu;
					v.pick_weight = v.pick_weight_yu;
          if(activeItem.value.pick_type == 3 || activeItem.value.pick_type == 4){
            v.prediction = v.wareuserdetail
          }else{
            v.prediction = v.prediction
          }
          if (v.pick_number_yu == 0) {
            v.disabled = true;
          } else {
            v.disabled = false;
          }
        })
        // let list = [...xiadanList.value,..._data]
        xiadanList.value = _data
        }
        
      })
  }
  const handlederiverorderLists = ()=>{   // 刷新已下订单数据
    let objDate = JSON.parse(JSON.stringify(orderItem.value))
    objDate.page = 1
    console.log(objDate)
    objDate.pageSize = objDate.page * objDate.pageSize
    let obj = {}
    for(let key in objDate){
      if(objDate[key]){
        obj[key] = objDate[key]
      }
    }
    yxzcdloading.value = true
    request({
        url: '/prediction/deriverOrder/index',
        method: 'get',
        params:obj
      }).then(res=>{
        console.log('已下提单数据：',res)
        if(res.code == 200){
          yxzcdloading.value = false
          let _data = res.data.items
          _data.map((v,i)=>{
            v.detail.map((vv,ii)=>{
              if(vv.prediction_id != 0){
                vv.children = vv.prediction
              }
              if(v.warehouse_user_detail_id != 0){
                vv.children = vv.wareuserdetail
              }
            })
            v.peisong_dept_id =  v.porder.peisong_dept_id
          })
          
          deriverorderLists.value = _data
        }
        
      })
  }
  const handlederiverorderList = ()=>{   // 已下订单数据
    let obj = {}
    for(let key in orderItem.value){
      if(orderItem.value[key]){
        obj[key] = orderItem.value[key]
      }
    }
    yxzcdloading.value = true
    request({
        url: '/prediction/deriverOrder/index',
        method: 'get',
        params:obj
      }).then(res=>{
        console.log('已下提单数据：',res)
        if(res.code == 200){
          yxzcdloading.value = false
          let _data = res.data.items
          _data.map((v,i)=>{
            v.detail.map((vv,ii)=>{
              if(vv.prediction_id != 0){
                vv.children = vv.prediction
              }
              if(v.warehouse_user_detail_id != 0){
                vv.children = vv.wareuserdetail
              }
              
            })
            v.peisong_dept_id =  v.porder.peisong_dept_id
          })
          console.log('下单数据：',_data)
          let list = [...deriverorderLists.value,..._data]
          deriverorderLists.value = list
        }
        
      })
  }
  const getCarNoList = (dept_id)=>{  // 获取公司可绑定的司机列表
    request({
      url: '/prediction/driver/getCarNoList?dept_id=' + dept_id,
      method: 'get',
      
    }).then(res=>{
      res.data.map((v,i)=>{
            v.keywords = [
              v.car_and_driver,
              pinyin(v.car_and_driver,{toneType:'none',pattern:'first'}).split(' ').join(''),
            ]
    })
      bangdingsijiList.value = res.data
    })
  }
  const handleorderCarLists = ()=>{    // 刷新已绑定司机列表
    let objDate = JSON.parse(JSON.stringify(CarNoItem.value))
    objDate.page = 1
    objDate.pageSize = objDate.page * objDate.pageSize
    let obj = {}
    for(let key in objDate){
      if(objDate[key]){
        obj[key] = objDate[key]
      }
    }
    sjloading.value = true
    request({
        url: '/prediction/orderCar/index',
        method: 'get',
        params:obj
      }).then(res=>{
        let _data = res.data.items
        _data.map((v,i)=>{
          v.car_ids = v.car_id
          v.car_and_driver = v.car_no + "-" + v.driver.driver_name
        })
        CarNoList.value = _data
        sjloading.value = false
      })
  }
  const handleorderCarList = ()=>{    // 获取已绑定司机列表
    let obj = {}
    for(let key in CarNoItem.value){
      if(CarNoItem.value[key]){
        obj[key] = CarNoItem.value[key]
      }
    }
    sjloading.value = true
    console.log(obj)
    request({
        url: '/prediction/orderCar/index',
        method: 'get',
        params:obj
      }).then(res=>{
        console.log('已绑定司机：',res)
        let _data = res.data.items
        _data.map((v,i)=>{
          v.car_ids = v.car_id
          v.car_and_driver = v.car_no + "-" + v.driver.driver_name
        })
        _data.map((v,i)=>{
              v.keywords = [
                v.car_and_driver,
                pinyin(v.car_and_driver,{toneType:'none',pattern:'first'}).split(' ').join(''),
                pinyin(v.car_and_driver,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
              ]
      })
        let list = [...CarNoList.value,..._data]
        CarNoList.value = list
        sjloading.value = false
      })
  }
  const handlePayOrderIndexs = ()=>{    // 刷新账单列表
    let objDate = JSON.parse(JSON.stringify(billItem.value))
    objDate.page = 1
    
    objDate.pageSize = objDate.page * objDate.pageSize
    zhangdanloading.value = true
    request({
        url: '/financial/payOrder/index',
        method: 'get',
        params:objDate
      }).then(res=>{
        if(res.code == 200){
          zhangdanloading.value = false
          let _data = res.data.items
          _data.map((v,i)=>{
            let arr = []
            let arrs = []
            v.pay_price = (v.pay_price - 0).toFixed(2)
              v.pay_real_price = (v.pay_real_price - 0).toFixed(2)
              v.discount_price = (v.discount_price - 0).toFixed(2)
              v.no_tax_price = (v.no_tax_price - 0).toFixed(2)
            v.detail.map((vv,ii)=>{
              vv.car_nos = '';
              vv.car_nos = vv.prediction.car_no
              
              if(vv.pay_price != '0.00' && vv.is_confirm == 1){
                arr.push(vv)
              }
            })
            v.detail = handleSOrt(arr)
            let carArr = []
            v.detail.map((vv,ii)=>{
              carArr.push(vv.car_nos)
            })
            var newArr = carArr.filter(function(item,index){
              return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
            });
            let numArr = []
            newArr.map((vv,ii)=>{
              let num = 0
              let name = ''
              carArr.map((vvv,iii)=>{
                if(vv == vvv){
                  num++
                  name = vvv
                }
              })
              numArr.push({car_no:name,weizhi:num,weizhizong:num})
            })
            let weizhiArr = []
            let weizhinum = 0
            numArr.map((vv,ii)=>{
              weizhinum += vv.weizhi
              weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
            })
            v.detail.map((vv,ii)=>{
              weizhiArr.map((vvv,iii)=>{
                if(vv.car_nos == vvv.car_no){
                  vv.weizhi = vvv.weizhi
                  vv.weizhizong = vvv.weizhizong
                }
              })
            })
            v.disabled = false
            if((v.pay_status == 2 && v.is_wait_check == 1) || v.pay_status != 2){
              v.disabled = true
            }
            v.order_no = v.driver_order?.order_no || ''
            v.flag = false
          })
          billList.value = _data
        }
        
      })
  }
  const handleSOrt = (ceshiArr)=>{   //排序
    let arr = []           // 最终数据
    let linshiArr = []     //  未匹配的放数组里
    let linshititle = ''   // 临时变量
    ceshiArr.map((v,i)=>{
      if(i == 0){
        linshititle = v.name
        arr.push(v)
      }else{
        if(linshititle == v.name){
          arr.push(v)
        }else{
          linshiArr.push(v)
        }
      }
    })
    ceshiArr.map((v,i)=>{
      if(linshiArr.length != 0){
        linshiArr.map((vv,ii)=>{
          if(ii == 0){
            linshititle = linshiArr[0].name
            arr.push(linshiArr.shift())
          }else{
            if(linshititle == vv.name){
              arr.push(linshiArr.slice(ii,1))
            }
          }
          
        })
        
      }
    })
    arr.sort((a, b) => a.car_nos.localeCompare(b.car_nos));
    return arr
  }
  const handlePayOrderIndex = ()=>{    // 获取账单
    zhangdanloading.value = true
    request({
      url: '/financial/payOrder/index',
      method: 'get',
      params:billItem.value
    }).then(res=>{
      if(res.code == 200){
        zhangdanloading.value = false
        let _data = res.data.items
        _data.map((v,i)=>{
          let arr = []
          let arrs = []
          v.pay_price = (v.pay_price - 0).toFixed(2)
              v.pay_real_price = (v.pay_real_price - 0).toFixed(2)
              v.discount_price = (v.discount_price - 0).toFixed(2)
              v.no_tax_price = (v.no_tax_price - 0).toFixed(2)
          v.detail.map((vv,ii)=>{
            vv.car_nos = '';
            vv.car_nos = vv.prediction.car_no
            
            // if(v.prediction_id){
              
            // }else{
            //   if(v.prediction_order_id != 0 && v.prediction_driver_order_id == 0){  //  补费
            //     vv.car_nos = ''
            //   }else{  // 装车收费
            //     if(vv.order_detail.prediction_id == 0){
            //       vv.car_nos = vv.order_detail.wareuserdetail.car_no
            //     }else{
            //       vv.car_nos = vv.order_detail.prediction.car_no
            //     }
            //   }
            // }
            if(vv.pay_price != '0.00' && vv.is_confirm == 1){
              arr.push(vv)
            }
          })
          v.detail = handleSOrt(arr)
          let carArr = []
          v.detail.map((vv,ii)=>{
            carArr.push(vv.car_nos)
          })
          var newArr = carArr.filter(function(item,index){
            return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
          });
          let numArr = []
          newArr.map((vv,ii)=>{
            let num = 0
            let name = ''
            carArr.map((vvv,iii)=>{
              if(vv == vvv){
                num++
                name = vvv
              }
            })
            numArr.push({car_no:name,weizhi:num,weizhizong:num})
          })
          let weizhiArr = []
          let weizhinum = 0
          numArr.map((vv,ii)=>{
            weizhinum += vv.weizhi
            weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
          })
          v.detail.map((vv,ii)=>{
            weizhiArr.map((vvv,iii)=>{
              if(vv.car_nos == vvv.car_no){
                vv.weizhi = vvv.weizhi
                vv.weizhizong = vvv.weizhizong
              }
            })
          })
          v.disabled = false
          if((v.pay_status == 2 && v.is_wait_check == 1) || v.pay_status != 2){
            v.disabled = true
          }
          v.order_no = v.driver_order?.order_no || ''
          v.flag = false
        })
        let list = [...billList.value,..._data]
        billList.value = list
        if(list.length != 0){
          orderShowItemsRef.value.handleZhifuInfo(billList.value[0].contract_id)
        }
      }
      
    })
  }
  // 点击受理
	const orderShouli = (item) => {
    handleMare()
    item.detail.map((v,i)=>{
      if(v.prediction_id){
        v.batch_no = v.prediction.batch_no
        v.car_no = v.prediction.car_no
        v.goods_name = v.prediction.goods_name
        v.work_line = v.prediction.work_line
        v.transport_number = v.prediction.transport_number
        v.producer = v.prediction.producer
        v.box = v.prediction.box
        v.box_type = v.prediction.box_type
        v.pick_weight = (v.pick_weight - 0)
      }else{
        v.batch_no = v.wareuserdetail.batch_no
        v.car_no = v.wareuserdetail.car_no
        v.goods_name = v.wareuserdetail.goods_name
        v.work_line = ''
        v.transport_number = ''
        v.producer = ''
        v.box = v.wareuserdetail.box
        v.box_type = v.wareuserdetail.box_type
        v.pick_weight = (v.pick_weight - 0)
      }
    })
		slitem.value = item;
    predictionOrder
			.acceptPrintRecord({
				id: slitem.value.id,
				pick_method: pick_method.value,
				buff_type:buff_type.value
			})
			.then((res) => {
				handleOrderIndexs()
			});
	};
	// 受理弹窗点击确定
	// const handleslOk = () => {
	// 	predictionOrder
	// 		.acceptPrintRecord({
	// 			id: slitem.value.id,
	// 			pick_method: pick_method.value,
	// 			buff_type:buff_type.value
	// 		})
	// 		.then((res) => {
	// 			slshowModle.value = false;
	// 			handleOrderIndexs()
	// 		});
	// };
  const handleYuGuBill = ()=>{    // 预估账单
    request({
      url: '/prediction/order/yuguData',
      method: 'get',
      params:{order_id:activeItem.value.id}
    }).then(res=>{
      let _data = res.data
      _data.created_at = activeItem.value.created_at
      yuguBillItem.value = _data
    })
  }
  const editShow = async (item) => {  // 创建账单
    editRef.value.open(cloneDeep(item))
  }
  const editSubmit = async (formData) => {   // 确认创建账单
    let submitData = cloneDeep(formData)
    console.log('editSubmit:',submitData)
    submitData.pay_items_json.forEach(item => {
      item.pay_price = item.pay_price.toFixed(2)
    })
    if (!formData.id) {
      let res = await FinancialPayOrder.save(submitData)
      if (res.success) {
        Message.success(res.message)
        // load(loadData)
        // crudRef.value.refresh()
        handlePayOrderIndexs()
        return true
      }
      return false;
    }else{
      let res = await FinancialPayOrder.editPay(submitData, formData.id)
      if (res.success) {
        Message.success(res.message)
        // load(loadData)
        // crudRef.value.refresh()
        handlePayOrderIndexs()
        return true
      }
    }
    return false
  }
  const handleTabs = (e) => {   // 切换选项卡
    tabs.value = e
    if(e == 'zc'){
      orderItem.value.order_id = activeItem.value.id
      orderItem.value.page = 1
      orderItem.value.pageSize = 10
      deriverorderLists.value = []
      setTimeout(() => {
        zcScrollHeight.value = zcScroll.value.offsetHeight
        handlederiverorderList()
      }, 202);
    }
    if(e == "sj"){
      CarNoItem.value.order_id = activeItem.value.id
      CarNoItem.value.page = 1
      CarNoItem.value.pageSize = 10
      CarNoList.value = []
      setTimeout(() => {
        sjScrollHeight.value = sjScroll.value.offsetHeight
        handleorderCarList()
      }, 202);
      getCarNoList(activeItem.value.dept_id)
    }
    if(e == "zd"){
      billItem.value.prediction_order_id = activeItem.value.id
      billItem.value.page = 1
      billItem.value.pageSize = 10
      billList.value = []
      setTimeout(() => {
        zdScrollHeight.value = zdScroll.value.offsetHeight
        handlePayOrderIndex()
        // handleYuGuBill()
      }, 202);
    }
    if(e == "xd"){
      xiadanItem.value.order_id = activeItem.value.id
      xiadanItem.value.prediction.goods_name = ''
      xiadanItem.value.prediction.car_no = ''
      xiadanItem.value.prediction.box = ''
      xiadanItem.value.prediction.box_type = ""
      xiadanList.value = []
      CarNoItem.value.page = 1
      CarNoItem.value.pageSize = 100
      CarNoItem.value.car_ids = ''
      CarNoItem.value.order_id = activeItem.value.id
      CarNoList.value = []
      xiadan_car_no.value = ''
      setTimeout(() => {
        xdScrollHeight.value = xdScroll.value.offsetHeight
        handleXiaDanList()
        handleorderCarList()
      }, 202);
    }
  }
  const handleActive = (e)=>{  // 选择提货单
    active.value = e
    tabs.value = 'jc'
  }
  const handleScroll = (event)=>{
    // 计算是否触底
    // console.log('scrollHeight:',event.target.scrollHeight)
    //   console.log('scrollTop:',event.target.scrollTop)
    //   console.log('clientHeight:',event.target.clientHeight)
    let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      console.log('已经触底')
      form.value.page++
      handleOrderIndex()
    }
  }
  const handlezcScroll = (event)=>{
    // 计算是否触底
    let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      console.log('已经触底')
      orderItem.value.page++
      handlederiverorderList()
    }
  }
  const handlesjScroll = (event)=>{
    // 计算是否触底
    let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      console.log('已经触底')
      CarNoItem.value.page++
      handleorderCarList()
    }
  }
  const handlezdScroll = (event)=>{
    // 计算是否触底
    let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      billItem.value.page++
      handlePayOrderIndex()
    }
  }
  const handlexdScroll = (event)=>{
    // 计算是否触底
    let isBottom = (event.target.scrollTop + event.target.clientHeight + 20) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      xiadanItem.value.page++
      handleXiaDanList()
    }
  }
  // 更新列表
  const handleOrderIndexs = ()=>{
    let objDate = JSON.parse(JSON.stringify(form.value))
    objDate.pageSize = (objDate.page) * objDate.pageSize
    objDate.page = 1
    let obj = {}
    for(let key in objDate){
      if(objDate[key]){
        obj[key] = objDate[key]
      }
    }
    loading.value = true
    request({
        url: '/prediction/order/index',
        method: 'get',
        params:obj
      }).then(res=>{
        let _data = res.data.items
        if(_data.length != 0){
          _data.map((v,i)=>{
            let car_nos = []
            v.detail.map((vv,ii)=>{
              if(v.pick_type == 1||v.pick_type == 2 ){
                vv.prediction = vv.prediction
              }
              if(v.pick_type == 3||v.pick_type == 4){
                vv.prediction = vv.wareuserdetail
              }
              
              if(car_nos.length == 0){
                car_nos.push(vv.prediction.car_no)
              }else{
                let num = car_nos.findIndex(item => item === vv.prediction.car_no)
                if(num == -1){
                  car_nos.push(vv.prediction.car_no)
                }
              }
            })

            v.car_nos = car_nos
            if(v.car_nos.length < 10){
              v.showCar = true
            }else{
              v.showCar = false
            }
          })
          _data.map((v,i)=>{
            if(v.id == active.value){
              activeItem.value = v
            }
          })
        }else{
          activeItem.value = {}
        }
        // tabs.value = "jc"
        
        cardLists.value = _data
        console.log('cardLists:',cardLists.value)
        loading.value = false
      })
  }
  const handleOrderIndex = ()=>{
    let obj = {}
    for(let key in form.value){
      if(form.value[key]){
        obj[key] = form.value[key]
      }
    }
    loading.value = true
    request({
        url: '/prediction/order/index',
        method: 'get',
        params:obj
      }).then(res=>{
        let _data = res.data.items
        _data.map((v,i)=>{
          let car_nos = []
          v.detail.map((vv,ii)=>{
            if(v.pick_type == 1||v.pick_type == 2 ){
              vv.prediction = vv.prediction
            }
            if(v.pick_type == 3||v.pick_type == 4){
              vv.prediction = vv.wareuserdetail
            }
            if(car_nos.length == 0){
              car_nos.push(vv.prediction.car_no)
            }else{
              let num = car_nos.findIndex(item => item === vv.prediction.car_no)
              if(num == -1){
                car_nos.push(vv.prediction.car_no)
              }
            }
          })
          v.car_nos = car_nos
          if(v.car_nos.length < 10){
            v.showCar = true
          }else{
            v.showCar = false
          }
          
        })
        if(form.value.page == 1 && res.data.items.length != 0){
          console.log('11111111111111111111')
          activeItem.value = _data[0]
        }
        let list = [...cardLists.value,..._data]
        if(obj.page == 1 && list.length!= 0){
        	active.value = list[0].id
        }
        cardLists.value = list
        loading.value = false
      })
  }
  const handleOkTime = (dateString, date)=>{
    form.value.created_at = dateString
  }
  const handleOkTimes = (dateString, date)=>{
    orderItem.value.created_at = dateString
  }
  const handlederiverpickStatus = ()=>{
    request({
        url: '/system/dataDict/list?code=deriver_pick_status',
        method: 'get',
        
      }).then(res=>{
        deriver_pick_statusList.value = res.data
      })
  }
  const handletransportType = ()=>{
    request({
        url: '/system/dataDict/list?code=transport_type',
        method: 'get',
        
      }).then(res=>{
        transport_typeList.value = res.data
      })
  }
  const handlepickType = ()=>{
    request({
        url: '/system/dataDict/list?code=pick_type',
        method: 'get',
        
      }).then(res=>{
        pick_typeList.value = res.data
      })
  }
  const handlebuffType = ()=>{
    request({
        url: '/system/dataDict/list?code=butt_type',
        method: 'get',
        
      }).then(res=>{
        buff_typeList.value = res.data
      })
  }
  const handlepickStatus = ()=>{
    request({
        url: '/system/dataDict/list?code=pick_status',
        method: 'get',
        
      }).then(res=>{
        pick_statusList.value = res.data
      })
  }
  const handleDeptList = ()=>{
    request({
        url: 'system/dept/remote',
        method: 'post',
        data:{
          openPage:false,
          remoteOption:{
            filter:{
              type:['=',2],
              status: ['=',1]
            },
            select: ["id", "name"],
            sort: {id: "desc"}
          }
        }
      }).then(res=>{
        res.data.map((v,i)=>{
        v.keywords = [
          v.name,
          pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
          pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
        ]
})
        dept_list.value = res.data
      })
  } 
  const handlePsDeptList = ()=>{
  	request({
        url: 'system/dept/remote',
        method: 'post',
        data:{
          openPage:false,
          remoteOption:{
            filter:{
              type:['=',3],
              status: ['=',1]
            },
            select: ["id", "name"],
            sort: {id: "desc"}
          }
        }
      }).then(res=>{
        res.data.map((v,i)=>{
          v.keywords = [
            v.name,
            pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
            pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
          ]
        })
        ps_deptList.value = res.data
      })
  }
  const handleyuGuZhangdan = (row)=>{
    request({
        url: "prediction/order/yuguData",
        method: "get",
        params: {
          order_id:row.id,
        },
      }).then((res) => {
        let arr = []
        res.data.pay_items_json.map((v,i)=>{
          v.pay_price = v.pay_price - 0
          if(v.pay_price != 0){
            arr.push(v)
          }
        })
        res.data.pay_items_json = arr
        yujiItem.value = res.data
        yuGuzdShow.value = true
      });
    
  }
  const handleZhangdan = (item)=>{
    orderShowItems.value = true
    orderShowItemsRef.value.open(item)
  }
	const orderGengzheng = (item) => {
		gengzheng_id = item.id;
		gengzhengvisible.value = true;
	};
	const handlecolse = ()=>{
		orderQueShow.value = false
		crudRef.value.refresh();
	}
	const handlegengzhengOk = async () => {
    let res = await predictionOrder.correctOrder({ id: gengzheng_id })
    if(res.code == 200){
      Notification.success("更正成功！");
      crudRef.value.refresh();
      return true
    }else{
      Notification.success(res.message);
      return false
    }
		
	};
	
	
	const confirmOk = (id) => {
		handleRedo(id);
    handleMare()
	};
	
	

	

const handleRedo = (id) => {
  predictionOrder.getcancelOrder(id).then((res) => {
    if (res.code == 200) {
      Message.success("取消成功！");
      handleOrderIndexs()
    }
  });
};









const handleCancel = () => {
  gengzhengvisible.value = false;
  crudRef.value.refresh()
};





</script>
<style lang="less" scoped>


/* .table tr td:last-child{
  border-right: none;
}
.table tr:last-child td{
  border-bottom: none;
} */
 .activetabs{
    border-radius:10px 10px 0 0;
    background:rgba(242, 243, 255, 1);
    border-bottom:4px solid rgba(31, 108, 235, 1);
 }
.flex{
      display:flex;
  }
  .flex_wrap{
      flex-wrap:wrap
  }
  
  .justify_between{
      justify-content:space-between
  }
  .justify_around{
      justify-content:space-around
  }
  .justify_center{
      justify-content:center
  }
  .justify_end{
    justify-content: flex-end;
  }
  .align_center{
      align-items:center;
  }
  .flex_column{
    flex-direction: column;
  }
  .flex_1{
      flex:1
  }
  .width0{
      width:0
  }
  .ellipsis{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
  }
  .marbot14{
    margin-bottom:14px;
  }
  .marbot12{
    margin-bottom:12px;
  }
  .pad12{
    padding:12px;
  }
  .zc_card{
    border-radius:6px;
    border:1px solid rgba(220, 220, 220, 1);
    margin-bottom:12px;
    margin-right:12px;
    &:nth-child(2n){
      margin-right:0;
    }
    .butNt{
      padding:2px 8px;
      border-radius:3px;
      border:1px solid rgba(220, 220, 220, 1);
      margin-right:12px;
      margin-bottom:12px
    }
  }
  .cards{
    padding:20px;
    border-radius:8px;
    border:1px solid rgba(0, 0, 0, .15);
    margin-bottom:12px;
    width:100%;
  }
  .cursor{
    cursor: pointer;
  }
</style>
<script>
export default {name: "prediction:order"};
</script>
